<template>
  <div>
    <ol class="breadcrumb">
      <li class="breadcrumb-item">系统管理</li>
      <li class="breadcrumb-item active">权限管理</li>
    </ol>

    <div class="row no-gutters flex-grow">
      <div class="col-md-5">
        <div class="bg-white h-100 mx-3 p-3 shadowed">
          <div class="d-flex justify-content-between py-3">
            <span class="text-muted">系统权限列表</span>
            <router-link to="/permission/new"><span class="img img-xxs rounded bg-blue">┼</span> 新增权限</router-link>
          </div>
          <tree :treenodes="treenodes"></tree>
        </div>
      </div>

      <div class="col-md-7 mt-3 mt-md-0">
        <div class="layer-loading" v-show="loading"><i></i><i></i><i></i></div>
        <div class="bg-white h-100 mx-3 p-3 ml-md-0 shadowed">
          <div class="d-flex justify-content-between py-3">
            <span class="text-muted">系统权限列表</span>
            <a href="#/permission/new">
              <span class="img img-xxs rounded bg-blue">┼</span> 新增权限</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {Permission} from '../../resources'
  import {del} from '../../misc/utils'
  import tree from './tree.vue'

  export default {
    data: () => ({
      loading: false,
      treenodes: []
    }),
    beforeRouteEnter(to, from, next) {
      Permission.tree().then(response => {
        next(vm => {
          vm.treenodes = response.data
          vm.$nextTick(() => vm.$emit('loaded'))
        })
      })
    },
    methods: {
      remove (id, index) {
      }
    },
    components: {tree}
  }
</script>